<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 850px;
            margin: auto;
            border: 1px solid black;
            padding-bottom: 200px;
            border-radius: 5px;
            box-shadow: 10px 10px 10px gray;
        }
        .top{
            width: 850px;
            text-align: center;
            font-size: 22px;
            font-weight: 700;
            padding-top: 20px;
            padding-bottom: 20px;
        }
        /* sr----------------------------------------------- */
        .sr{
            width: 800px;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }
        .uname{
            width: 70px;
            border-radius: 5px;
            border: solid 1px rgb(165, 199, 248);
        }
        .uage{
            width: 60px;
            border-radius: 5px;
            border: solid 1px rgb(165, 199, 248);
        }
        .uxb{
            width: 60px;
            border-radius: 5px;
            border: solid 1px rgb(165, 199, 248);
        }
        .uxz{
            width: 70px;
            border-radius: 5px;
            border: solid 1px rgb(165, 199, 248);
        }
        .ucs{
            width: 80px;
            border-radius: 5px;
            border: solid 1px rgb(165, 199, 248);
        }
        button{
            width: 50px;
            background-color: rgb(2, 2, 103);
            color: #fff;
            border-radius: 5px;
        }
        /* tbl----------------------------------------------- */
        .tbl{
            width: 800px;  
            margin: auto;
            text-align: center;
        }
        th{
            background-color: rgb(167, 197, 237);
            border: 1px solid rgb(134, 178, 237);
            color: rgb(6, 53, 115);
        }
        td{
            border: 1px solid rgb(134, 178, 237);
        }
        .sc{
            background-color: rgb(6, 53, 115);
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">新增学员</div>
        <div class="sr">
            <span>姓名:</span><input type="text" class="uname">
            <span>年龄:</span><input type="text" class="uage">
            <span>性别:</span><select name="" id="" class="uxb">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <span>薪资:</span><input type="text" class="uxz">
            <span>就业城市:</span><select name="" id="" class="ucs">
                <option value="北京">北京</option>
                <option value="江西">江西</option>
                <option value="上海">上海</option>
                <option value="福建">福建</option>
                <option value="江苏">江苏</option>
                <option value="深圳">深圳</option>
            </select>
            <button>录入</button>
        </div>
        <div class="top">就业榜</div>
        <div class="tbl">
            <table cellspacing="0" cellpadding="10" width="800px">
                <thead>
                    <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>薪资</th>
                    <th>就业城市</th>
                    <th>操作</th>
                </tr>
                </thead>
                
                <tbody></tbody>
            </table>
        </div>
    </div>


    <script>
        let arr=[]

        const uname=document.querySelector('.uname')//获取姓名
        const uage=document.querySelector('.uage')//获取年龄
        const uxb=document.querySelector('.uxb')//获取性别-默认男
        uxb.value='男'
        const uxz=document.querySelector('.uxz')//获取薪资
        const ucs=document.querySelector('.ucs')//获取就业城市-默认北京
        ucs.value='北京'
        const but=document.querySelector('button')//获取录入按钮
        const tbody=document.querySelector('tbody')



        function xran(){
            tbody.innerHTML=' '//每次渲染前清空表格

            for(i=0;i<arr.length;i++){
                const tbody = document.querySelector('tbody')
                const tr = document.createElement('tr')

                tr.innerHTML = `
                        <td>${i+1}</td>
                        <td>${arr[i].uname}</td>
                        <td>${arr[i].uage}</td>
                        <td>${arr[i].uxb}</td>
                        <td>${arr[i].uxz}</td>
                        <td>${arr[i].ucs}</td>
                        <td class="sc"><a data-id="${i}">删除</a></td>
                `
                tbody.appendChild(tr)
            }
            console.log(arr);
            
        }

        but.addEventListener('click',function(){
            if(uname.value=='' || uage.value=='' || uxz.value==''){
                alert("不能为空")
                return
            }

            arr.push({
                uname:uname.value,
                uage:uage.value,
                uxb:uxb.value,
                uxz:uxz.value,
                ucs:ucs.value
                })

            // 清空输入框和选择框   或者用this.reset()  this为表单引用时
            uname.value = '';
            uage.value = '';
            uxz.value = '';
            uxb.value = '男'; 
            ucs.value = '北京';

            xran()
        })

        tbody.addEventListener('click',function(e){
            if(e.target.tagName === 'A'){
                arr.splice(e.target.dataset.id,1)
                xran()
            }
        })
    </script>
</body>
</html>